<template>
  <div class="BlogInfo">
    <div class="BlogInfoContent">
      <div class="BlogInfoHead"></div>
      <div class="BlogInfoContent">
        <div class="port" @click="jump()"><img :src="$store.state.port"></div>
        <div class="Collection">
          <div>
            <h4>姓名</h4>
            <p>{{$store.state.name}}</p>
          </div>
          <div>
            <h4>项目数</h4>
            <p>3</p>
          </div>
          <div>
            <h4>文章数</h4>
            <p>32</p>
          </div>
          <div>
            <h4>评论数</h4>
            <p>15</p>
          </div>
        </div>
        </div>
      </div>
    </div>
</template>

<script>
export default {
name: "BlogInfo",
  methods:{
  jump(){
      return this.$router.push({'name':'BlogPort'});
  }
  }
}
</script>

<style scoped>
.BlogInfo{
  min-height: 100vh;
}
   .BlogInfoHead{
     height: 200px;
     background: url("../../public/img/divider-bg.jpg");
     background-repeat: no-repeat;
     background-position: 50%;
     background-size: cover;
   }
   .port{
     height: 100px;
     width: 100px;
     margin: -40px auto 0px auto;
     background-color: #6d737b;
     border-radius: 50%;
     overflow: hidden;
   }
   .port img {
     width: 100%;
   }
   .Collection{
     display: flex;
     justify-content: space-between;
     margin: 130px auto 0 auto;
     width: 1330px;
   }
   .Collection div{
     text-align: center;
     width: 18%;
     font-family: 微軟正黑體,Arial;
   }
   .Collection div p{
     margin-top: 10px;
   }
</style>